<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="../src/css/scroll/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" id="test-1" href="../src/layui/css/layui.css" />
    <link rel="stylesheet" href="../src/css/index_dark.css" />
    <!-- <link rel="stylesheet" href="../src/css/pages/my_app.css"> -->
    <title>我的应用</title>
</head>

<body>
    <div class="layout_app " id="layout_app">
        <!-- 头部 -->
        <div class="layout-header">
            <a class="logo" href="javascript:;"></a>
            <div class="user-nav">
                <a class="use-nav-btn" href="javascript:;">
                    <span class="iconfont icon-icon-xgmm"></span>
                    <span>修改密码</span>
                </a>
                <a class="use-nav-btn" href="javascript:;">
                    <span class="iconfont icon-icon-jcbd"></span>
                    <span>解除绑定</span>
                </a>
                <a class="use-nav-btn" href="javascript:;">
                    <span class="iconfont icon-icon-tc"></span>
                    <span>退出</span>
                </a>
            </div>
        </div>
        <!-- 左侧菜单 -->
        <div class="layout-aside">
            <span class="aside-shrinkage " id="aside-shrinkage"></span>
            <div class="layout-anim">
                <!-- 管理员头像 -->
                <img src="../src/img/admin.jpeg" alt="" />
            </div>
            <div class="layout-admin-name text-center">白东阳</div>
            <div class="text-center offices-box">
                <a class="layout-btn-offices" href="javascript:;">省司法厅</a>
            </div>
            <div class="layout-menu" id="layout-menu">
                <ul class="layout-menu-levl">
                    <li class="">
                        <a class="menu-item " href="../index.html">
                            <span class="sy iconfont icon-icon_nav_sy"></span>
                            <span class="menu-name">首页</span>
                        </a>
                    </li>
                    <li>
                        <a class="menu-item active" href="javascript:;">
                            <span class="wdyy iconfont icon-icon_nav_wdyy"></span>
                            <span class="menu-name">我的应用</span>
                        </a>
                    </li>
                    <li>
                        <a class="menu-item" href="./announcements.html">
                            <span class="tzgg iconfont icon-icon_nav_tzgg"></span>
                            <span class="menu-name">通知公告</span>
                        </a>
                    </li>
                    <li>
                        <a class="menu-item" href="./data_show.html">
                            <span class=" sjzs iconfont icon-icon_nav_sjzs"></span>
                            <span class="menu-name">数据展示</span>
                        </a>
                    </li>
                    <li>
                        <a class="menu-item" href="./download_center.html">
                            <span class="xzzx iconfont icon-icon_nav_wdyy"></span>
                            <span class="menu-name">下载中心</span>
                        </a>
                    </li>
                    <li>
                        <a class="menu-item layout-set" href="javascript:;">
                            设置
                        </a>
                        <ul>
                            <li>
                                <a class="menu-item" href="./user_center.html">
                                    <span class=" grzx iconfont icon-icon_nav_grzx"></span>
                                    <span class="menu-name">个人中心</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="skin-list text-center" id="skin-list">
                <a data-theme="0" class="skin-list-item blue" href="javascript:;"></a>
                <a data-theme="1" class="skin-list-item black" href="javascript:;"></a>
                <a data-theme="2" class="skin-list-item purple" href="javascript:;"></a>
                <a data-theme="3" class="skin-list-item green" href="javascript:;"></a>
            </div>
        </div>
        <div class="layout-main">
            <!-- 白色铺满背景 -->
            <div class="con-bg-white"></div>

            <div class="layout-main-con mC-con">
                <div class="my-app-con">
                    <div class="my-app-title">
                        <p>首页应用</p>
                    </div>
                    <div class="my-app-list">
                        <ul class="my-app-list-box layui-clear delete-app" id='my-app-list'>
                            <li>
                                <span class="layui-icon layui-icon-loading-1"></span>
                            </li>
                            <!-- <li>
                                <a class="app-item" href="javascript:;">
                                    <img width="60px" height="60px" src="../src/img/app_icon/icon_bgoa.png" alt="">
                                    <span>监狱管理</span>
                                    <span class="after-icon"></span>
                                </a>
                            </li> -->
                        </ul>
                    </div>
                    <div class="my-app-title">
                        <p>全部应用</p>
                    </div>
                    <div class="my-app-list">
                        <ul class="my-app-list-box layui-clear add-app" id=view-all-app>
                            <li>
                                <span class="layui-icon layui-icon-loading-1"></span>
                            </li>
                            <!-- <li>
                                <a class="app-item" href="javascript:;">
                                    <img width="60px" height="60px" src="../src/img/app_icon/icon_bgoa.png" alt="">
                                    <span>法律援助</span>
                                    <span class="after-icon"></span>
                                </a>

                            </li> -->

                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- <script id="allApp" type="text/html">
            {{#  layui.each(d, function(index, item){ }}
            <li>
                    <a class="app-item" href="javascript:;">
                        <img width="60px" height="60px" src="../src/img/app_icon/{{item.imgName}}.png" alt="">
                        <span>{{item.name}}</span>
                        <span data-id="{{index}}" class="after-icon"></span>
                    </a>

                </li>
            {{#  }); }}
        </script> -->

        <script id="mhyApp" type="text/html">
            {{#  layui.each(d, function(index, item){ }}
            <li>
                    <a class="app-item" href="javascript:;">
                            {{#  if(item.permission){ }}
                                <!--有权限的图标 -->
                                <img width="60px" height="60px" src="../src/img/app_icon/{{item.imgName}}.png" alt="">
                             {{#  } }} 

                             {{#  if(!item.permission){ }}
                             <!--无权限的图标 -->
                             <img width="60px" height="60px" src="../src/img/app_icon/{{item.imgName}}_wp.png" alt="">
                          {{#  } }} 
                        <span>{{item.name}}</span>
                        <span data-id="{{index}}" class="after-icon"></span>
                    </a>

                </li>
            {{#  }); }}
        </script>
        <script src="../src/layui/layui.all.js"></script>
        <script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
        <script src="../src/js/scroll/jquery.mCustomScrollbar.js"></script>

        <script>
            $(window).on("load", function() {
                $(".mC-con").mCustomScrollbar({
                    theme: "dark",
                    autoHideScrollbar: true //自动隐藏滚动条
                }).css({
                    paddingRight: '0px'
                });
            });
            //主题切换
            setTheme(getThemeLink())
            $('#skin-list').on('click', 'a', function() {
                // 0-blue 1-dark 2-purple 3-green
                var $themeId = $(this).attr('data-theme');
                removeDarkTheme()
                setTheme(getThemeLink($themeId));
            })

            function getThemeLink(themeId) {
                var themeLink = '';
                var loca_theme = localStorage.getItem('theme')
                switch (themeId || loca_theme || 1) {
                    case '0':
                        localStorage.setItem('theme', '0');
                        themeLink = '../src/css/index_blue.css'
                        break;
                    case '1':
                        localStorage.setItem('theme', '1');

                        themeLink = '../src/css/index_dark.css'
                        break;

                    case '2':
                        localStorage.setItem('theme', '2');
                        themeLink = '../src/css/index_purple.css'
                        break;

                    case '3':
                        localStorage.setItem('theme', '3');
                        themeLink = '../src/css/index_green.css'
                        break;
                    default:
                        localStorage.setItem('theme', '0');
                        themeLink = '../src/css/index_dark.css'
                        break;
                }
                return themeLink
            }

            function setTheme(themeLink) {
                var link = document.createElement('link');
                link.type = 'text/css';
                link.id = "theme-css"; // 加上id方便后面好查找到进行删除
                link.rel = 'stylesheet';
                link.href = themeLink;
                document.getElementsByTagName("head")[0].appendChild(link);

            }
            // 删除主题
            function removeDarkTheme() {
                $('#theme-css').remove();
            }
            // mini布局切换
            $('#aside-shrinkage').on('click', function() {
                $('.layout_app').toggleClass('mini-layout')
            })

            // 菜单选择
            $('#layout-menu').on('click', '.menu-item ', function(e) {

                $('#layout_app').hasClass('mini-layout') ? $('#layout_app').removeClass('mini-layout') : '';
                if ($(this).hasClass('layout-set')) {
                    $(this).toggleClass('collpage');
                    return
                }
                $('#laypout-iframe').attr('src', $(this).attr('href'))
                $('#layout-menu .menu-item').removeClass('active');
                $(this).addClass('active');

            })
        </script>

        <script src="../src/js/my_app.js"></script>
</body>

</html>